<template>
  <div class="centralManagement">
    <el-form ref="searchForm" :model="searchForm" label-width="20px">
      <el-row gutter="20">
        <div v-if="GLOBAL.global_limit.includes('17')">
          <el-col :span="1" offset="0" >
            <el-button type="primary" size="mini" @click=addChoose>新增中心</el-button>
          </el-col>
        </div>
        <div v-if="GLOBAL.global_limit.includes('16')">
          <el-col :span="4" offset="4">
            <el-input v-model="queryInfo.centralName" width="80px" size="small" suffix-icon="el-icon-search" clearable placeholder="请输入中心名称"></el-input>
          </el-col>
          <el-col :span="3">
            <el-select  v-model="queryInfo.universityName" size="small" filterable clearable placeholder="学校名称">
              <el-option
                v-for="item in universityList"
                :key="item"
                :label="item"
                :value="item"/>
            </el-select>
          </el-col>
<!--          <el-col :span="3">-->
<!--            <el-select v-model="queryInfo.centralStatus" size="small" filterable clearable placeholder="中心状态">-->
<!--              <el-option-->
<!--                v-for="item in statusList"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"/>-->
<!--            </el-select>-->
<!--          </el-col>-->
          <el-col :span="7">
            <el-date-picker
              v-model="queryInfo.filterDates"
              type="daterange"
              value-format="yyyy-MM-dd"
              align="left"
              size="small"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="2"  >
            <el-button type="primary" size="mini" @click="initData">搜索</el-button>
          </el-col>
        </div>
      </el-row>
    </el-form>
    <el-dialog title="新建中心信息" align="left" :visible.sync="dialogFormVisible">
      <el-form :model="addInfo" label-width="100px">
        <el-form-item label="高校名称" >
          <el-input v-model="addInfo.universityName" ></el-input>
        </el-form-item>
        <el-form-item label="中心名称" >
          <el-input v-model="addInfo.centralName" ></el-input>
        </el-form-item>
        <el-form-item label="中心负责人" >
          <el-input v-model="addInfo.centralDirector" ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" >
          <el-input v-model="addInfo.centralPhone" ></el-input>
        </el-form-item>
<!--        <el-form-item label="中心人数" >-->
<!--          <el-input v-model="addInfo.centralNum" ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="中心状态" >-->
<!--          <el-select v-model="addInfo.centralStatus" placeholder="请选择状态">-->
<!--            <el-option label="使用中" :value="1"></el-option>-->
<!--            <el-option label="未开启" :value="0"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click=addCentral>确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑中心信息" align="left" :visible.sync="dialogForm2Visible">
      <el-form :model="editInfo" label-width="100px">
        <el-form-item label="高校名称" >
          <el-input v-model="editInfo.universityName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="中心名称" >
          <el-input v-model="editInfo.centralName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="中心负责人" >
          <el-input v-model="editInfo.centralDirector" ></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="editInfo.centralPhone" ></el-input>
        </el-form-item>
<!--        <el-form-item label="中心人数" >-->
<!--          <el-input v-model="editInfo.centralNum" ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="中心状态" >-->
<!--          <el-select v-model="editInfo.centralStatus" placeholder="请选择状态">-->
<!--            <el-option label="使用中" :value="1"></el-option>-->
<!--            <el-option label="未开启" :value="0"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm2Visible = false">取 消</el-button>
        <el-button type="primary" @click=Edit>确 定</el-button>
      </div>
    </el-dialog>
     <el-table
        stripe
        v-loading="listLoading"
        :row-style="{height:'45px'}"
        :cell-style="{padding:'0px'}"
        style="font-size: 14px;width: 100%"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data=centralManagementTable>
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="universityName"
          label="高校名称"
          width="180"
          :show-overflow-tooltip='true'>
        </el-table-column>
        <el-table-column
          align="center"
          prop="centralName"
          label="中心名称"
          width="200"
          :show-overflow-tooltip='true'>
        </el-table-column>
        <el-table-column
          align="center"
          prop="centralDirector"
          label="中心负责人"
          width="130"
          :show-overflow-tooltip='true'>
        </el-table-column>
        <el-table-column
          align="center"
          prop="centralPhone"
          label="联系方式"
          width="200">
        </el-table-column>
<!--        <el-table-column-->
<!--          align="center"-->
<!--          prop="centralNum"-->
<!--          label="中心人数"-->
<!--          width="100">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          align="center"-->
<!--          prop="acceptNum"-->
<!--          label="接待人次"-->
<!--          width=100>-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--         align="center"-->
<!--         prop="centralStatus"-->
<!--         label="中心状态"-->
<!--         width="100">-->
<!--         <template slot-scope="scope">-->
<!--           <el-tag v-if=" scope.row.centralStatus == 1" type="success" effect="dark">使用中</el-tag>-->
<!--           <el-tag v-else-if="scope.row.centralStatus == 0" type="info" >未开启</el-tag>-->
<!--         </template>-->
<!--        </el-table-column>-->
        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
          width="150"
          :show-overflow-tooltip='true' >
        </el-table-column>
        <el-table-column  align="center" label="设置">
          <template slot-scope="scope">
            <span v-if="GLOBAL.global_limit.includes('18')">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
            </span>
            <span v-if="GLOBAL.global_limit.includes('19')">
            <el-button
              size="mini"
              type="danger"
              @click="Delete(scope.row)">删除</el-button>
            </span>
          </template>
        </el-table-column>
     </el-table>
     <div class="el-pagination">
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="queryInfo.pageNum"
         :page-sizes="[5, 8, 10, 15]"
         :page-size="queryInfo.pageSize"
         :total="total"
         layout="total, sizes, prev, pager, next, jumper">
       </el-pagination>
     </div>
  </div>
</template>
<script>
 export default {
  data() {
    return {
      id:1,
      centralManagementTable: {},
      queryInfoCon:{
          universityName:null,
          centralName:null,
          centralStatus:1,
          filterDates:["",""],
      },
      queryInfo:{
        universityName:null,
        centralName:null,
        centralStatus:1,
        filterDates:["",""],
        pageNum: 1,
        pageSize: 10
      },
      addInfo:{
        universityName:null,
        centralName:null,
        centralDirector:null,
        centralPhone:null,
        centralNum:null,
        acceptNum:0,
        centralStatus:1,
        createTime:null
      },
      editInfo:{
        id:null,
        universityName:null,
        centralName:null,
        centralDirector:null,
        centralPhone:null,
        centralNum:null,
        acceptNum:0,
        centralStatus:1,
        createTime:null
      },
      delInfo:{
        id:null,
      },
      dialogFormVisible: false,
      dialogForm2Visible: false,
      noTime:null,
      total: 0,
      universityList: [
        '阳光大学',
        '月光大学'],
      statusList: [{
        label:'使用中',
        value: 1
      }, {
        label:'未开启',
        value: 0
      }],
    }
  },
   created() {
     this.initData();
     this.getTime()
   },
   methods: {
     //获取当前时间
     getTime(){
       var today = new Date()
       setInterval(()=>{
         this.nowTime = (today.getFullYear()) +"-" + (today.getMonth() + 1 ) + "-" + today.getDate();
       },1000)
     },
     //提交查询信息
     initData() {
       if(this.queryInfo.filterDates==null)
           this.queryInfo.filterDates=["",""]
       if(this.queryInfo.universityName!=this.queryInfoCon.universityName||this.queryInfo.centralName!=this.queryInfoCon.centralName
           ||this.queryInfo.centralStatus!=this.queryInfoCon.centralStatus||this.queryInfo.filterDates!=this.queryInfoCon.filterDates){
           this.queryInfo.pageNum=1
           this.queryInfoCon.universityName=this.queryInfo.universityName
           this.queryInfoCon.centralName=this.queryInfo.centralName
           this.queryInfoCon.centralStatus=this.queryInfo.centralStatus
           this.queryInfoCon.filterDates=this.queryInfo.filterDates
       }
       var allData
       this.$axios.post("managementSystem/center/find",this.queryInfo)
         .then(data => {
           if (data.status != 200) {
             this.$message.error('服务出错' + data.status);
             // this.$message(fgf{
             //   message:'服务错误',
             //   type:'warn'
             // });
           } else {
             if (data.data.errorCode == '200') {
               allData = data.data
               console.log(allData.errorMsg)
               this.centralManagementTable=allData.centralManagementTable
               this.total = allData.totalNum
               this.universityList=allData.universityList
             }
           }
         })
     },
     //监听 页面尺寸 改变
     handleSizeChange (newSize) {
       this.queryInfo.pageSize = newSize
       this.initData()
     },
     // 监听 页码值 改变的事件
     handleCurrentChange (newPage) {
       // console.log(newPage)
       this.queryInfo.pageNum = newPage
       this.initData()
     },
     handleEdit(row) {  //进入编辑表单
       this.editInfo.id=row.id    //直接用this.editInfo=row 传会有问题
       this.editInfo.universityName=row.universityName
       this.editInfo.centralName=row.centralName
       this.editInfo.centralDirector=row.centralDirector
       this.editInfo.centralPhone=row.centralPhone
       this.editInfo.centralNum=row.centralNum
       this.editInfo.acceptNum=row.acceptNum
       this.editInfo.centralStatus=row.centralStatus
       this.editInfo.createTime=row.createTime
       this.dialogForm2Visible = true
     },
     Edit(){  //提交编辑内容
       this.dialogForm2Visible = false
       var allData
       this.$axios.post("managementSystem/center/edit",this.editInfo)
         .then(data => {
           if (data.status != 200) {
             this.$message.error('服务出错' + data.status);
             // this.$message(fgf{
             //   message:'服务错误',
             //   type:'warn'
             // });
           } else {
             if (data.data.errorCode == '200') {
               allData = data.data
               console.log(allData.errorMsg)
               this.$message({
                 type: 'success',
                 message: '修改成功!'
               })
               this.initData()
             }
           }
         })
     },
     Delete( row) {
       this.$confirm('此操作将永久删除该中心, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'danger',
         center: true
       }).then(() => {
         this.delInfo.id = row.id
         this.$axios.post("managementSystem/center/delete",this.delInfo)
           .then(data => {
             if (data.status != 200) {
               this.$message.error('服务出错' + data.status);
               // this.$message(fgf{
               //   message:'服务错误',
               //   type:'warn'
               // });
             } else {
               if (data.data.errorCode == '200') {
                 console.log("删除表项：", this.delInfo.id, data.data.errorMsg)
                 this.initData()
               }
             }
           })
         this.$message({
           type: 'success',
           message: '中心删除成功!'
         })
       }).catch(() => {
         this.$message({
           type: 'info',
           message: '已取消删除'
         });
       });
     },
     addChoose(){
       this.dialogFormVisible=true
       this.addInfo={
           universityName:null,
           centralName:null,
           centralDirector:null,
           centralPhone:null,
           centralNum:null,
           acceptNum:null,
           centralStatus:1,
           createTime:null
       }
     },
     addCentral(){
       this.dialogFormVisible=false;
       this.getTime()
       this.addInfo.createTime=this.nowTime
       var allData
       this.$axios.post("managementSystem/center/insert",this.addInfo)
         .then(data => {
           if (data.status != 200) {
             this.$message.error('服务出错' + data.status);
             // this.$message(fgf{
             //   message:'服务错误',
             //   type:'warn'
             // });
           } else {
             if (data.data.errorCode == '200') {
               allData=data.data
               console.log(allData.errorMsg)
               this.$message({
                 type: 'success',
                 message: '添加成功!'
               })
               this.initData()
             }
           }
         })
     },
  }
 }

</script>
<style scoped>

</style>
